<template>
	<view class="community-contianer">
		<!-- 顶部tab切换 -->
			<u-tabs :current="current" @change="tabChange" :list="list1" lineColor="#000000" :activeStyle=activeStyle :inactiveStyle="inactiveStyle"></u-tabs>
			<!-- 搜索区域 -->
			<u-search v-show="current===0" placeholderColor="#FFFFFF"  placeholder="搜索" v-model="keyword" bgColor="#262626"  :showAction="false">
			</u-search>
			<!-- 内容区域 -->
			<view class="community-content" v-show="current===0">
				<view class="community-item" v-for="item in communityList" :key="item.name">
					<!-- 头部区域 -->
					<view class="item-header">
						<image src="../../static/imgs/user-avtar.png"></image>
						<view class="item-name">
							{{item.name}}
						</view>
					</view>
					<!-- 内容区域 -->
					<view class="item-content">
						<view class="content-desc">
							{{item.content}}
							<text style="color: #6E6E6E;">...全部</text>
						</view>
						<view class="content-imgs" v-for="(img,index) in item.img" :key="index">
							<image :src="img" mode=""></image>
						</view>
					</view>
					<!-- 底部区域 -->
					<view class="item-footer">
						<view class="like">
							<u-icon :name="require('../../static/imgs/dianzan.png')"></u-icon>
							<text style="color: #A8A8A8;font-size: 24rpx;">154</text>
						</view>
						<view class="like">
							<u-icon :name="require('../../static/imgs/pinglun.png')"></u-icon>
							<text style="color: #A8A8A8;font-size: 24rpx;">25</text>
						</view>
						<view class="like">
							<u-icon :name="require('../../static/imgs/zhuanfa.png')"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<choiceness v-show="current===2"></choiceness>
		</view>
	</view>
</template>

<script>
	import choiceness from "./choiceness.vue"
	export default {
		components:{
			choiceness
		},
		data() {
			return {
				list1: [{
					name: '社区',
				}, {
					name: '关注',
				}, {
					name: '精选'
				}],
				current:0,
				activeStyle: {
					color: "#FFFFFF",
					fontSize: "40rpx",
					fontWeight: "bold"
				},
				inactiveStyle: {
					color: "#FFFFFF",
					fontWeight: "bold"
				},
				keyword: "",
				communityList: [{
					userAvatr: "../../static/imgs/user-avtar.png",
					name: "喵小姐瘦身日记",
					content: "二十岁偷过的懒，都会变成30岁困住你的墙。而四十岁的人生，藏在三十岁努力里。",
					img: [
						"../../static/imgs/community1.png", "../../static/imgs/community1.png",
						"../../static/imgs/community1.png"
					]
				}, {
					userAvatr: "../../static/imgs/user-avtar.png",
					name: "芽衣",
					content: "90天减重32斤减肥日记day22身高165...初始体重65.3kg每日计划、目标",
					img: [
						"../../static/imgs/community2.png", "../../static/imgs/community3.png",
						"../../static/imgs/community4.png"
					]
				}]
			}
		},
		methods:{
			tabChange(item){
				this.current=item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.community-contianer {
		height: 100%;
		overflow-y: auto;
		background-color: #000000;
		padding: 0 50rpx;

		.community-content {
			.community-item {
				margin: 60rpx 0;
				border-radius: 30rpx;
				border: 1px solid #000000;
				background: #262626;
				padding: 20rpx;

				.item-header {
					display: flex;
					align-items: center;

					image {
						width: 40px;
						height: 40px;
						margin-right: 20rpx;
					}
				}

				.item-content {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					line-height: 35rpx;
					margin: 20rpx 0;
					.content-imgs {
						margin-top: 20rpx;
						image {
							width: 187rpx;
							height: 286rpx;
						}
					}
				}

				.item-footer {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 40rpx;

					.like {
						display: flex;
						align-items: center;

						text {
							margin-left: 10rpx;
						}
					}

					.like:not(last-child) {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
